<!DOCTYPE html>
<html>
<script>
    function preloadImg() {
        var loadImg = []; // 创建一个数组，
        // 通过push方法，将图片路径添加进数组
        loadImg.push('../static/background/beyond.png');
        loadImg.push('../static/background/rac03tonextp.png');
        loadImg.push('../static/background/rabpit01overlong.png');
        loadImg.push('../static/background/rac01aciculignosa.png');
        loadImg.push('../static/background/rac02sprout.png');
        loadImg.push('../static/background/rac03pupa.png');
        loadImg.push('../static/background/v22startingwind.png');
        loadImg.push('../static/background/v30springsnowflake.png');
        //遍历数组    执行上述步骤1和步骤2
        for (var i = 0; i < loadImg.length; i++) {
            var newImg = new Image();
            newImg.src = loadImg[i];
        }
    }

    //步骤3
    window.addEventListener('load', function () {
//调用预加载函数
        preloadImg()
    })
</script>
<head>
    <title>图片格式转换工具</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../static/acerola.png}" media="screen"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body {
            width: 100%;
            height: 100%;
            position: absolute;
            margin: 0 auto;
            top: 0;
        }

        #bg {
            width: 100%;
            height: 100%;
            position: absolute;
            margin: 0 auto;
            top: 0;
            background-image: url("../static/background/rac03tonextp.png");
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 1;
            /*animation: fateimg 100s linear infinite;*/
        }

        /*@keyframes fateimg {*/
        /*    0% {*/
        /*        background: url(../static/background/beyond.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    11% {*/
        /*        background: url(../static/background/beyond.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    12% {*/
        /*        background: url(../static/background/beyond.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    13% {*/
        /*        background: url(../static/background/rac03tonextp.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    23% {*/
        /*        background: url(../static/background/rac03tonextp.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    24% {*/
        /*        background: url(../static/background/rac03tonextp.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    25% {*/
        /*        background: url(../static/background/rabpit01overlong.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    35% {*/
        /*        background: url(../static/background/rabpit01overlong.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    36% {*/
        /*        background: url(../static/background/rabpit01overlong.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    37% {*/
        /*        background: url(../static/background/rac01aciculignosa.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    47% {*/
        /*        background: url(../static/background/rac01aciculignosa.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    48% {*/
        /*        background: url(../static/background/rac01aciculignosa.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    49% {*/
        /*        background: url(../static/background/rac02sprout.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    59% {*/
        /*        background: url(../static/background/rac02sprout.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    60% {*/
        /*        background: url(../static/background/rac02sprout.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    61% {*/
        /*        background: url(../static/background/rac03pupa.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    72% {*/
        /*        background: url(../static/background/rac03pupa.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    73% {*/
        /*        background: url(../static/background/rac03pupa.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    74% {*/
        /*        background: url(../static/background/v22startingwind.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    85% {*/
        /*        background: url(../static/background/v22startingwind.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    86% {*/
        /*        background: url(../static/background/v22startingwind.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    87% {*/
        /*        background: url(../static/background/v30springsnowflake.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    98% {*/
        /*        background: url(../static/background/v30springsnowflake.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    99% {*/
        /*        background: url(../static/background/v30springsnowflake.png);*/
        /*        opacity: 0;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*    100% {*/
        /*        background: url(../static/background/beyond.png);*/
        /*        opacity: 1;*/
        /*        background-repeat: no-repeat;*/
        /*        background-size: cover;*/
        /*    }*/
        /*}*/

        #up {
            z-index: 19891015;
            width: 600px;
            height: 350px;
            position: absolute;
            left: 0;
            right: 50%;
            bottom: 10%;
            top: 0;
            margin: auto;
        }

        .title {
            background: #009f95;
            color: #fff;
            border: none;
            padding: 0 80px 0 20px;
            height: 42px;
            line-height: 42px;
            font-size: 14px;
            border-radius: 2px 2px 0 0;
        }

        .file-box {
            display: inline-block;
            overflow: hidden;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #0e9aef;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            bottom: 8px;
            right: 164px;
        }

        .file-btn {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            outline: none;
            background-color: transparent;
            filter: alpha(opacity=0);
            opacity: 0;
        }

        .startBtn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            bottom: 8px;
            right: 42px;
        }

        th {
            width: 155px;
            min-height: 20px;
            height: 28px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            padding: 9px 15px;
            line-height: 20px;
            font-size: 14px;
            background: #f7f7f7;
            text-align: center;
        }

        table {
            border-spacing: 0;
            margin: 0 auto;
            border: 1px solid #777;
            background: white;
        }

        thead {
            color: #666;
        }

        td {
            text-align: center;
        }

    </style>


</head>
<body>
<div id="bg"></div>
<script>
</script>
<div id="up">
    <div class="title">文件上传</div>
    <table>
        <thead>
        <tr>
            <th>
                <div class="layui-table-cell laytable-cell-2-status" align="center"><span>文件名</span></div>
            </th>
            <th>
                <div class="layui-table-cell laytable-cell-2-status" align="center"><span>大小</span></div>
            </th>
            <th>
                <div class="layui-table-cell laytable-cell-2-status" align="center"><span>状态</span></div>
            </th>
            <th>
                <div class="layui-table-cell laytable-cell-2-status" align="center"><span>操作</span></div>
            </th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <form class="file-box">
        <input type="file"
               multiple="multiple"
               class="file-btn"
               id="pic"
               name="pic"
               accept="image/jpeg,image/png">
        选择本地图片
    </form>
    <div class="alert alert-warning">注:图片格式自动识别,支持jpg,jpeg转png或png转jpg</div>

    <button class="startBtn">
        开始上传

    </button>

</div>

</body>
</html>
<script type="text/javascript">
    function uploadFile() {
        // var pic = $("#pic").get(0).files[0];
        var pic = $('#pic').get(0).files;
        console.log(pic.length)
        var formData = new FormData();
        for (var i = 0; i < pic.length; i++) {
            formData.append("pic['+i+']", pic[i]);
        }
        formData.append("file", pic[0]);

        $.ajax({
            type: "POST",
            url: '/upload',
            data: formData,
            processData: false,
            contentType: false,//必须false才会自动加上正确的Content-Type
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                if (onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress", onprogress, false);
                    return xhr;
                }
            },
            success: function (data) {
                $("#myAlert").alert();
                // <div className="alert alert-success">请稍等,处理中</div>

                let path = data.rootFilePath;
                let url = data.downloadUrl;
                $.ajax({

                    type: "POST",
                    url: '/convert',
                    data: {
                        path: path,
                        url: url
                    },
                    success: function (mm) {
                        location.href = mm
                    }
                });
            }
        });
    }

    // 设置进度条
    function onprogress(evt) {
        var loaded = evt.loaded;     //已经上传大小情况
        var tot = evt.total;      //附件总大小
        var per = Math.floor(100 * loaded / tot);
        $('#parent progress').val(per);
        if (per == '100') {
            $('#parent progess').css('display', 'none');
            $('#parent').text('上传成功');
        }
        $("#son").css("width", per + "%");
    }


    $('.file-btn').on('change', function () {
        // 获取上传的文件名字
        var str = $(this).val();
        if (str !== "") {
            var arr = str.split("\\");
            var fileName = arr[arr.length - 1];
        }
        // 获取上传文件的大小
        if (pic) {
            var fileSize = 0;
            if (pic.size > 1024 * 1024)
                fileSize = (Math.round(pic.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
                fileSize = (Math.round(pic.size * 100 / 1024) / 100).toString() + 'KB';
        }

        var tr = $(['<td>' + fileName + '</td>'
            , '<td>' + fileSize + '</td>'
            , '<td id="situation"><div>等待上传</div></td>'
            , '<td  id="deletePile"><button>删除</button></td>'
            , '</div>'
            , '</td>'
            , '</tr>'].join(''));
        console.log(tr);
        $('tbody').html(tr);
    });
    // 开始按钮
    $(".startBtn").on("click", function () {
        uploadFile();
        $('#situation').html('<div id="parent" style="color:green;"><progress value="0" max="100"></progress></div>')
    });
</script>